<template>
    <div class="all" style="position: relative;">
        <div style="font-size: 18px;height: 3%;color: white;">系统管理</div>
        <div class="borderall flexset col">
            <div class="nav">
                <ul class="flexset titleul" style="float: left;width: 80%;">
                    <li :class="{ 'Active': firstSelect }" :style="{ borderWidth: (firstSelect == 1 ? '2px' : '1px') }">
                        <a class="lia" @click=firstchange() style="text-decoration: none;">系统维护/帮助</a>
                    </li>
                    <li :class="{ 'Active': secondSelect }" :style="{ borderWidth: (secondSelect == 1 ? '2px' : '1px') }">
                        <!-- <a class="lia" @click=secondchange() style="text-decoration: none; color:white;" href="/" >权限管理</a> -->
                        <router-link class="lia" active-class="active" to="/permission" style="color: white;">权限管理</router-link>
                    </li>
                </ul>
                <div style="float: right;color: #34b1e0;height: 40px;font-size: 20px;margin-right: 10px;display:flex;
				justify-content: center;align-items: center;"><router-link style="color: #34b1e0;font-size: 20px;"
                        to="/zong">返回首页</router-link>
                </div>
            </div>
            <div class=" flexset bottomnav" style="width: 100%; height: 100%;margin: 5px;">
                <div class="flexset col" style="width: 55%; height: 100%;">
                    <div class="flexset" style="width: 100%; height: 60%;">
                        <div class="Sys-settings block">
                            <div class="flexset title">
                                <div class="square"></div>
                                <span class="blutex">系统设置</span>
                            </div>
                            <div class="content" style="padding: 0 30px 0 30px;">
                                <div class="flexset line" style="justify-content: space-between;">
                                    <span>动态数据通信时间间隔(s)</span>
                                    <el-input-number size="mini" v-model="interval1" :max="10"></el-input-number>
                                </div>
                                <div class="flexset line" style="justify-content: space-between;">
                                    <span>动态评估时间间隔(s)</span>
                                    <el-input-number size="mini" v-model="interval2" :max="10"></el-input-number>
                                </div>
                                <div class="flexset line" style="justify-content: space-between;">
                                    <span>系统修复</span>
                                    <input class="recover" type="button" value="修复" @click="dialogVisible = true" />
                                </div>
                                <el-dialog title="修复设置" :visible.sync="dialogVisible" width="30%">
                                    <span style="padding-right: 40px;">选择备份</span>
                                    <el-select v-model="value" placeholder="请选择">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <span slot="footer" class="dialog-footer">
                                        <el-button @click="dialogVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="dialogVisible = false">恢 复</el-button>
                                    </span>
                                </el-dialog>
                            </div>
                        </div>
                        <div class="Module-management block">
                            <div class="flexset title">
                                <div class="square"></div>
                                <span class="blutex">模块管理</span>
                            </div>
                            <div class="content" style="padding: 0 30px 0 30px;">
                                <div class="flexset line" style="justify-content: space-between;">
                                    <span>故障诊断参数设置</span>
                                    <input class="recover" type="button" value="设置" @click="setVisible = true" />
                                </div>
                                <div class="flexset line" style="justify-content: space-between;">
                                    <span>状态判别参数设置</span>
                                    <input class="recover" type="button" value="设置" @click="setVisible = true" />
                                </div>
                                <div class="flexset line" style="justify-content: space-between;">
                                    <span>趋势预测参数设置</span>
                                    <input class="recover" type="button" value="设置" @click="setVisible = true" />
                                </div>
                                <div class="flexset line" style="justify-content: space-between;">
                                    <span>智能决策参数设置</span>
                                    <input class="recover" type="button" value="设置" @click="setVisible = true" />
                                </div>
                                <el-dialog title="参数设置" :visible.sync="setVisible" width="30%">
                                    <div class="flexset line" style="justify-content: space-around;align-items: center;">
                                        <span>参数1设置</span>
                                        <input type="text" class="paraminput" />
                                    </div>
                                    <div class="flexset line" style="justify-content: space-around;align-items: center;">
                                        <span>参数2设置</span>
                                        <input type="text" class="paraminput" />
                                    </div>
                                    <div class="flexset line" style="justify-content: space-around;align-items: center;">
                                        <span>参数3设置</span>
                                        <input type="text" class="paraminput" />
                                    </div>
                                    <span slot="footer" class="dialog-footer">
                                        <el-button @click="setVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="setVisible = false">确 定</el-button>
                                    </span>
                                </el-dialog>
                            </div>
                        </div>
                    </div>
                    <div class="log block">
                        <div class="flexset title">
                            <div class="square"></div>
                            <span class="blutex">事件日志</span>
                        </div>
                        <div class="content" style="padding: 0 40px 0 40px;">
                            <table class="logtable">
                                <tr>
                                    <th><span>内容</span></th>
                                    <th><span>时间</span></th>
                                    <th><span>状态</span></th>
                                    <th><span>操作</span></th>
                                </tr>
                                <tr v-for="(item, index) in logs" :key="index">
                                    <td><span>{{ item.con }}</span></td>
                                    <td><span>{{ item.time }}</span></td>
                                    <td><span>{{ item.checked }}</span></td>
                                    <td>
                                        <span style="color: rgb(56, 171, 187);font-weight: bold;">
                                            <span @click="handle(index)" v-if="item.checked == '未处理'"
                                                style="padding-right: 10px;">处理</span>
                                            <span @click="ignore(index)">忽略</span>
                                        </span>
                                    </td>
                                    <el-dialog title="事件处理" :visible.sync="handleVisible" width="30%">
                                        <span style="padding-right: 40px;">{{ con }}</span>

                                        <span slot="footer" class="dialog-footer">
                                            <el-button @click="handleVisible = false">取 消</el-button>
                                            <el-button type="primary" @click="handleyi()">确认处理</el-button>
                                        </span>
                                    </el-dialog>
                                    <el-dialog title="事件忽略" :visible.sync="ignoreVisible" width="30%">
                                        <span style="padding-right: 40px;">{{ con }}</span>
                                        <span slot="footer" class="dialog-footer">
                                            <el-button @click="ignoreVisible = false">取 消</el-button>
                                            <el-button type="primary" @click="ignoredelete()">确认忽略</el-button>
                                        </span>
                                    </el-dialog>
                                </tr>

                            </table>
                        </div>
                    </div>
                </div>
                <div class="help block">
                    <div class="flexset title">
                        <div class="square"></div>
                        <span class="blutex">系统帮助</span>
                    </div>
                    <div class="content" style="padding: 0 40px 0 40px;">
                        <div class="flexset line" style="justify-content: space-around; align-items: center;">
                            <el-select v-model="value1" clearable placeholder="层级结构">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select v-model="value2" clearable placeholder="评估类型">
                                <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <input class="recover helpbutton" type="button" value="查询" />
                        </div>
                        <div class="box">
                            <el-tree :data="data" default-expand-all props="defaultProps" @node-click="handleNodeClick"
                                style="width: 30%;" class="tree"></el-tree>
                            <table class="searchtable">
                                <tr>
                                    <th><span>设备名称</span></th>
                                    <th><span>评估类型</span></th>
                                    <th><span>状态</span></th>
                                    <th><span @click="moreVisible = true">分析详情</span></th>
                                </tr>
                                <tr v-for="(item, index) in zhubian" :key="index">
                                    <td><span>{{ item.name }}</span></td>
                                    <td><span>{{ item.evaluation }}</span></td>
                                    <td><span>{{ item.checked }}</span></td>
                                    <td><span @click="moreVisible = true">详情</span></td>
                                </tr>
                                <tr v-for="(item, index) in duan" :key="index">
                                    <td><span>{{ item.name }}</span></td>
                                    <td><span>{{ item.evaluation }}</span></td>
                                    <td><span @click="moreVisible = true">{{ item.checked }}</span></td>
                                    <td><span @click="moreVisible = true">详情</span></td>
                                </tr>
                                <tr v-for="(item, index) in second" :key="index">
                                    <td><span>{{ item.name }}</span></td>
                                    <td><span>{{ item.evaluation }}</span></td>
                                    <td><span>{{ item.checked }}</span></td>
                                    <td><span @click="moreVisible = true">详情</span></td>
                                </tr>
                            </table>
                            <el-dialog title="分析详情" :visible.sync="moreVisible" width="30%">
                                <span style="padding-right: 40px;">分析详情</span>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="moreVisible = false">确 定</el-button>
                                </span>
                            </el-dialog>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    methods: {
        firstchange() {
            this.firstSelect = 1
            this.secondSelect = 0
        },
        secondchange() {
            this.firstSelect = 0
            this.secondSelect = 1
        },
        ignoredelete() {
            this.logs.splice(this.logindex, 1)
            this.ignoreVisible = false
        },
        handleyi() {
            console.log(this.logindex)
            this.logs[this.logindex].checked = '已处理'
            this.handleVisible = false
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        handle(index) {
            this.con = this.logs[index].con
            this.handleVisible = true;
            this.logindex = index
            // this.logs[index].checked = '已处理'
        },
        ignore(index) {
            this.con = this.logs[index].con
            this.ignoreVisible = true;
            this.logindex = index
        }
    },
    data() {
        return {
            data: [{
                label: '全部设备',
                children: [{
                    label: '变压器',
                    children: [{
                        label: '1号主变'
                    },
                    {
                        label: '2号主变'
                    },
                    {
                        label: '3号主变'
                    }]
                },
                {
                    label: '断路器',
                    children: [{
                        label: '1号短路'
                    },
                    {
                        label: '2号短路'
                    },
                    {
                        label: '3号短路'
                    },]
                },
                {
                    label: '二次设备',
                    children: [{
                        label: '高压线路保护'
                    }]
                },
                ]
            }],
            moreVisible: false,
            firstSelect: 1,
            secondSelect: 0,
            logindex: 0,
            con: '',
            handleVisible: false,
            ignoreVisible: false,
            setVisible: false,
            dialogVisible: false,
            inputsearch: '',
            interval1: '1',
            interval2: 1,
            zhubian: [{
                name: '1号主变',
                status: '非常高',
                evaluation: '正常',
                checked: '已确认'
            }, {
                name: '2号主变',
                status: '中等',
                evaluation: '正常',
                checked: '未确认'
            }, {
                name: '3号主变',
                status: '低',
                evaluation: '异常',
                checked: '未确认',
                more: '',
            }],
            duan: [{
                name: '1号断路器',
                status: '非常高',
                evaluation: '正常',
                checked: '未确认'
            }, {
                name: '2号断路器',
                status: '非常低',
                evaluation: '异常',
                checked: '未确认'
            }],
            second: [{
                name: '1号主变保护',
                status: '非常高',
                evaluation: '异常',
                checked: '未确认'
            }, {
                name: '2号主变保护',
                status: '低',
                evaluation: '异常',
                checked: '未确认'
            }],
            logs: [
                {
                    con: '1号主变油温异常',
                    time: '2023-12-23',
                    checked: '未处理'
                },
                {
                    con: '2号主变油温异常',
                    time: '2023-12-23',
                    checked: '未处理'
                },
                {
                    con: '3号主变油温异常',
                    time: '2023-12-23',
                    checked: '已处理'
                },
                {
                    con: '4号主变油温异常',
                    time: '2023-12-23',
                    checked: '已处理'
                },
                {
                    con: '5号主变油温异常',
                    time: '2023-12-23',
                    checked: '已处理'
                },
                {
                    con: '6号主变油温异常',
                    time: '2023-12-23',
                    checked: '已处理'
                },
            ],
            value1: '',
            options1: [{
                value: '选项1',
                label: '变压器'
            }, {
                value: '选项2',
                label: '断路器'
            }, {
                value: '选项3',
                label: '二次设备'
            }],
            value2: '',
            options2: [{
                value: '选项1',
                label: '正常'
            }, {
                value: '选项2',
                label: '异常'
            }],
            value: '',
            options: [{
                value: '选项1',
                label: '正常'
            }, {
                value: '选项2',
                label: '异常'
            }],
        }
    }
}
</script>

<style scoped>
.bottomnav {
    height: 100%;
}

.nav {
    width: 100%;
    height: 3%;
}

.titleul {
    color: #fff;
    margin: 2px 0;
    margin-left: 1%;
    padding: 0;
    width: 99%;
    height: 100%;
}

.titleul li {
    border: 1px solid #34b1e0;

    width: 10%;
    height: 100%;
    display: flex;
    list-style: none;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    transform: skew(50deg, 0);
}


td {
    text-align: center;
}

.logtable td,
.logtable th {
    width: 200px;
}

td>span {
    display: inline-block;
    padding: 12px 30px 12px 30px;
}

table {
    /* border: 1px solid white; */
    margin: 0 auto;
}

table tr:nth-child(odd) {
    background-color: #0A2754;
}

th {
    color: #5BADD7;
}
/* .tree{
    flex:1
}
.searchtable{
    flex:2;
} */
.searchtable td,
.searchtable th {
    /* width: 200px; */
    height: 35px;
}

.all {
    padding: 10px;
    width: 1920px;
    height: 1080px;
    background-color: #020e30;

}

.borderall {
    /* font-size: 20px; */
    box-sizing: border-box;
    width: 100%;
    height: 96%;
    border: 2px solid #34b1e0;
}

.block {
    padding: 15px;
    background-color: #071f49;
    margin: 10px;
}

.block span {
    font-size: 18px;
}

.flexset {
    display: flex;
    /* height: 500px; */
}
.box{
     display: flex;
    height: 600px;
}

.Sys-settings,
.Module-management {
    width: 100%;
    height: 92%;
}

.log {
    flex: 1;
}

.help {
    flex: 1;
}

.col {
    flex-direction: column;
}

.square {
    height: 18px;
    width: 4px;
    background-color: #5BADD7;
}

.blutex {
    font-weight: 700;
    color: #5BADD7;
    margin-left: 15px;
}

.title {
    align-items: center;
}

.content {
    margin-top: 50px;
    color: white;
}

.line {
    padding-bottom: 50px;
}

.left,
:deep(.el-input__inner) {
    background-color: transparent;
}

:deep(.el-input-number--mini) {
    width: 100px;
    /* height: 20px; */
    line-height: 30px;
}

:deep(.el-input--mini .el-input__inner) {
    height: 32px;
    color: #5BADD7;
    padding-left: 15px;
    padding-right: 15px;
}

:deep(.el-input-number--mini .el-input-number__decrease) {
    width: 20px;
}

:deep(.el-input-number--mini .el-input-number__increase) {
    width: 20px;
}

:deep(.el-input-number__decrease) {
    background-color: transparent;
    color: #5BADD7;
}

:deep(.el-input-number__increase) {
    background-color: transparent;
    color: #5BADD7;
}

.recover {

    width: 100px;
    background-color: transparent;
    color: #5BADD7;
    height: 32px;
    border: 1px solid white;
    font-size: small;
    border-radius: 5px;
    vertical-align: middle;
}

.el-button--primary {
    background-color: #5BADD7;
    border-color: #5BADD7;
}

:deep(.el-dialog) {
    border: 1px solid #5BADD7;
    background-color: #071f49;

}


:deep(.el-dialog__body) {
    color: white;

}

:deep(.el-dialog__title) {
    color: #5BADD7;

}

.el-button {
    background-color: transparent;
    color: white;
}

.paraminput {
    border: 1px solid white;
    border-radius: 5px;
    background-color: transparent;
    width: 100px;
    height: 32px;
}

:deep(.el-select .el-input__inner) {
    width: 150px;
    height: 40px;
}

.helpbutton {
    width: 150px;
    height: 40px;
}

.lia {
    cursor: pointer;
    transform: skew(-50deg, 0);
}

.Active {
    border: 2px solid rgb(52, 177, 224);
    background-image: radial-gradient(rgb(52, 177, 224), rgb(2, 14, 48));
    box-sizing: border-box;
    color: aqua;
    font-weight: 800;
}

:deep(.el-tree) {
    background-color: #0A2754;
    color: #fff;
}

:deep(.el-tree-node__label) {
    font-size: 18px;
}

:deep(.el-tree-node__content) {
    height: 50px;
}

:deep(.el-tree-node__content:hover) {
    background-color: #071f49;
}

:deep(.el-tree-node:focus>.el-tree-node__content) {
    background-color: #071f49;
    color: #34b1e0;
}
</style>
